<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>
          Google Web Toolkit
          
            -
            Understanding Layout</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link href="../css/base.css" rel="stylesheet" type="text/css">
<link href="./doc.css" rel="stylesheet" type="text/css">
<link href="../css/print.css" rel="stylesheet" media="print" type="text/css">
</head>
<body>
<div id="gaia">&nbsp;</div>
<div id="header">
<div id="logo">
<a href="http://code.google.com/"><img src="http://code.google.com/images/code_sm.png" alt="Google"></a>
</div>
<div id="title">Google Web Toolkit (Beta)</div>
<div id="breadcrumbs">
<div id="nextprev">
<nobr><a href="com.google.gwt.doc.DeveloperGuide.UserInterface.CreatingCustomWidgets.html">&laquo; prev</a></nobr><nobr><a href="com.google.gwt.doc.DeveloperGuide.UserInterface.StyleSheets.html">next &raquo;</a></nobr>
</div>
<span class="item"><a href="http://code.google.com/">Google Code Home</a></span>
        &gt;
        <span class="item"><a href="http://code.google.com/webtoolkit/">Google Web Toolkit</a></span>
        &gt;
        
        <span class="item"><a xmlns="" href="com.google.gwt.doc.DeveloperGuide.html">Developer Guide</a></span> &gt;
						<span class="item"><a href="com.google.gwt.doc.DeveloperGuide.UserInterface.html">Building User Interfaces</a></span> &gt;
						<span class="selected item">Understanding Layout</span>
</div>
</div>
<div id="side">
<div id="menu">
<h4>
<a href="http://code.google.com/webtoolkit/">Google Web Toolkit</a>
</h4>
<ul>
<li>
<a href="http://code.google.com/webtoolkit/download.html">Download GWT</a>
</li>
</ul>
<ul>
<li>
<a href="http://code.google.com/webtoolkit/overview.html">Product Overview</a>
</li>
<li>
<a href="http://code.google.com/webtoolkit/gettingstarted.html">Getting Started Guide</a>
</li>
<li>
<a href="http://code.google.com/webtoolkit/documentation/examples/">Example Projects</a>
</li>
</ul>
<ul>
<li>
<a class="selected" href="./com.google.gwt.doc.DeveloperGuide.html">Developer Guide</a>
</li>
<li>
<a href="./gwt.html">Class Reference</a>
</li>
<li>
<a href="http://code.google.com/webtoolkit/issues/">Issue Tracking</a>
</li>
<li>
<a href="http://groups.google.com/group/Google-Web-Toolkit">Developer Forum</a>
</li>
</ul>
<ul>
<li>
<a href="http://googlewebtoolkit.blogspot.com/">GWT Blog</a>
</li>
<li>
<a href="http://code.google.com/webtoolkit/faq.html">GWT FAQ</a>
</li>
<li>
<a href="http://code.google.com/webtoolkit/makinggwtbetter.html">Making GWT Better</a>
</li>
</ul>
<ul>
<li>
<a href="http://code.google.com/webtoolkit/thirdparty.html">Third Party Tools</a>
</li>
</ul>
</div>
<div id="search">
<form action="http://www.google.com/search" method="get">
<div>
<input name="domains" value="code.google.com" type="hidden"><input name="sitesearch" value="code.google.com" type="hidden">
<div class="header">Search this site:</div>
<div class="input">
<input name="q" size="10">
</div>
<div class="button">
<input value="Search" type="submit">
</div>
</div>
</form>
</div>
</div>
<div xmlns="http://www.w3.org/1999/xhtml" id="body">
<h1>Understanding Layout</h1>Panels in GWT are much like their counterparts in other user interface
 libraries. The main difference lies in the fact that they use HTML
 elements such as DIV and TABLE to layout their child widgets.
 
 <h2>RootPanel</h2>
 The first panel you're likely to encounter is the
 <a xmlns="" href="com.google.gwt.user.client.ui.RootPanel.html">RootPanel</a>. This panel is always at
 the top of the containment hierarchy. The default RootPanel wraps the
 HTML document's body, and is obtained by calling
 <a href="com.google.gwt.user.client.ui.RootPanel.html#get()">RootPanel.get()</a>. If you need to
 get a root panel wrapping another element in the HTML document, you can
 do so using <a href="com.google.gwt.user.client.ui.RootPanel.html#get(java.lang.String)">RootPanel.get(String)</a>.
 
 <h2>CellPanel</h2>
<a href="com.google.gwt.user.client.ui.CellPanel.html">CellPanel</a> is the abstract base
 class for <a href="com.google.gwt.user.client.ui.DockPanel.html">DockPanel</a>,
 <a href="com.google.gwt.user.client.ui.HorizontalPanel.html">HorizontalPanel</a>, and
 <a href="com.google.gwt.user.client.ui.VerticalPanel.html">VerticalPanel</a>. What these panels
 all have in common is that they position their child widgets within
 logical "cells". Thus, a child widget can be aligned within the cell that
 contains it, using
 <a href="com.google.gwt.user.client.ui.CellPanel.html#setCellHorizontalAlignment(com.google.gwt.user.client.ui.Widget, com.google.gwt.user.client.ui.HasHorizontalAlignment.HorizontalAlignmentConstant)">setCellHorizontalAlignment()</a>
 and
 <a href="com.google.gwt.user.client.ui.CellPanel.html#setCellVerticalAlignment(com.google.gwt.user.client.ui.Widget, com.google.gwt.user.client.ui.HasVerticalAlignment.VerticalAlignmentConstant)">setCellVerticalAlignment()</a>.
 CellPanels also allow you to set the size of the cells themselves
 (relative to the panel as a whole) using
 <a href="com.google.gwt.user.client.ui.CellPanel.html#setCellWidth(com.google.gwt.user.client.ui.Widget, java.lang.String)">CellPanel.setCellWidth</a> and
 <a href="com.google.gwt.user.client.ui.CellPanel.html#setCellHeight(com.google.gwt.user.client.ui.Widget, java.lang.String)">CellPanel.setCellHeight</a>.
 
 <h2>Other Panels</h2>
 Other panels include <a href="com.google.gwt.user.client.ui.DeckPanel.html">DeckPanel</a>,
 <a href="com.google.gwt.user.client.ui.TabPanel.html">TabPanel</a>, <a href="com.google.gwt.user.client.ui.FlowPanel.html">FlowPanel</a>,
 <a href="com.google.gwt.user.client.ui.HTMLPanel.html">HTMLPanel</a>, and
 <a href="com.google.gwt.user.client.ui.StackPanel.html">StackPanel</a>.
 
 <h2>Sizes and Measures</h2>
 It is possible to set the size of a widget explicitly using
 <a href="com.google.gwt.user.client.ui.UIObject.html#setWidth(java.lang.String)">setWidth()</a>,
 <a href="com.google.gwt.user.client.ui.UIObject.html#setHeight(java.lang.String)">setHeight()</a>,
 and <a href="com.google.gwt.user.client.ui.UIObject.html#setSize(java.lang.String, java.lang.String)">setSize()</a>.
 The arguments to these methods are strings, rather than integers, because
 they accept any valid CSS measurements, such as pixels (128px),
 centimeters (3cm), and percentage (100%).</div>
<div id="footer" xmlns="http://www.w3.org/1999/xhtml">
          &copy;2007 Google
          <span class="noprint">
            -
            <a href="http://www.google.com/">Google Home</a>
            -
            <a href="http://www.google.com/jobs/">We're Hiring</a>
            -
            <a href="http://www.google.com/privacy.html">Privacy Policy</a>
            -
            <a href="http://www.google.com/terms_of_service.html">Terms of Service</a>
            -
            <a href="mailto:code@google.com">Contact Us</a></span>
<div id="license" style="text-align: center; margin: 1em 0em 1em 0em">
            Except as otherwise
            <a href="http://code.google.com/policies.html#restrictions">noted</a>, the content of this  page is licensed under the  <a rel="license" href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 License</a>.
              <!--
            <rdf:RDF xmlns="http://web.resource.org/cc/">
<Work rdf:about="">
<license rdf:resource="http://creativecommons.org/licenses/by/2.5/"></license>
</Work>
<License rdf:about="http://creativecommons.org/licenses/by/2.5/">
<permits rdf:resource="http://web.resource.org/cc/Reproduction"></permits>
<permits rdf:resource="http://web.resource.org/cc/Distribution"></permits>
<requires rdf:resource="http://web.resource.org/cc/Notice"></requires>
<requires rdf:resource="http://web.resource.org/cc/Attribution"></requires>
<permits rdf:resource="http://web.resource.org/cc/DerivativeWorks"></permits>
</License>
</rdf:RDF>
              -->
            </div>
</div>
<script src="https://ssl.google-analytics.com/urchin.js" type="text/javascript" xmlns="http://www.w3.org/1999/xhtml"></script><script type="text/javascript">
          _uacct="UA-18071-1"; _uanchor=1; urchinTracker();
        </script>
</body>
</html>
